<template>
  <div>
    <h3>榜单页</h3>
    {{ kindlist }}   <br>
    <span v-for="(item,i) in kindlist" :key="i">
        <el-link @click="addlist(item.id)">{{ item.kind}}  &emsp;</el-link>
    </span>
    <br>
    {{ manyList }}
    <div v-for="(item,i) in manyList" :key="i">
        <span>歌名：{{ item. name}}</span> &emsp;
        <span>歌手：{{ item. singn}}</span> &emsp;
        <span>时长：{{ item. shichang}}</span> &emsp;
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            kindlist:[],
            manyList:[],
        }
    },
    mounted(){
        this.getKind()
    },
    methods:{
        getKind(){
            axios.get('http://127.0.0.1:8000/user/kind/')
            .then(resp=>{
                console.log(resp);
                this.kindlist=resp.data
            })
            .catch(err=>{
                console.log(err);
            })
        },
        addlist(id){
            axios.get('http://127.0.0.1:8000/user/musiccate/'+id+'/')
            .then(resp=>{
                console.log(resp);
                this.manyList=resp.data

            })
            .catch(err=>{
                console.log(err);
            })
        }
    },
}
</script>

<style>

</style>